/*
  输入框
  TextField 是最常用的文本输入组件
  TextField 组件的默认样式是带有下划线的装饰样式。如果需要自定义装饰样式（添加标签、图标、提示文本和错误文本），
  可以将 InputDecoration 应用到 TextField 的 decoration 属性上。如果需要完全移除下划线和标签预留空间，可以将 decoration 属性设置为 null。

  TextFormField 内部封装了一个 TextField 并被集成在表单组件 Form 中。
  如果需要对文本输入进行验证或者需要与其他表单组件 FormField 交互联动，可以考虑使用 TextFormField。
 */

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp2());

// 一般用法
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextField',
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField'),
        ),
        body: Center(
          child: Column(
            children: [
              TextField(
                  style: TextStyle(fontSize: 16),
                  controller: _controller,
                  decoration: InputDecoration(
                      fillColor: Colors.deepOrange[100], // 背景色
                      border: OutlineInputBorder( // 有边框，默认是下划线形式
                          borderSide: BorderSide(color: Colors.amber[200] as Color)),
                      hintText: '请输入问题',
                      errorText: '请重新输入',
                      prefix: Text('提示',  // 前缀控件，获得焦点时显示
                          textDirection: TextDirection.ltr,
                          style: TextStyle(color: Colors.black26)),
                      suffix: Text('后缀'), // 后缀控件
                    helperText: '帮助'
                  )
              ),
              TextButton(
                  onPressed: () {
                    print(_controller.text); // 获取输入内容
                  },
                  child: Text('click me'))
            ],
          ),
        ),
      ),
    );
  }
}

// 通常做法，使用Container
class MyApp2 extends StatefulWidget {
  @override
  _MyApp2State createState() => _MyApp2State();
}

class _MyApp2State extends State<MyApp2> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextField',
      home: Scaffold(
        appBar: AppBar(title: Text('TextField'),),
        body: Center(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
                    decoration: BoxDecoration(
                        border: Border.all(color: Colors.lightBlue[100] as Color),
                        borderRadius: BorderRadius.circular(8.0)
                    ),
                    child: TextField(
                      decoration: InputDecoration.collapsed(hintText: '请输入'),// 设置为无边框
                      // maxLength: 10, // 最大可输入长度,会有输入字数提示
                      onChanged: (text){  // 输入监听
                        print('输入的字符:$text');
                      },
                      inputFormatters: [  // 输入限制
                        LengthLimitingTextInputFormatter(5), // 输入长度限制，这样不会有提示
                        FilteringTextInputFormatter.allow(RegExp("[0-9]")), // 白名单，只能输入0-9
                        FilteringTextInputFormatter.deny(RegExp("[1,3,5]")) // 黑名单，不能输入135
                      ],
                      textInputAction: TextInputAction.done,  // 显示键盘输入完成时的动作
                      keyboardType: TextInputType.number, // 键盘类型
                    ),
                  ),
                ),
                TextButton(onPressed: (){}, child: Text('搜索')),
              ],
            ),
          ),
        ),
        // 弹出键盘时是否改变控件位置以保持在键盘上方
        resizeToAvoidBottomInset: false,
      ),
    );
  }
}
